<template>
<div class="bg">
    <div class="mo_bg" @click="closelist"></div>
    <div class="list_box">
        <div class="list" v-for="(item,index) in childlish" :key="index" @click="btnEvent(index)" :class="{color_red:item.colorred}"> {{item.text}}</div>
        <!-- <div class="list" @click="btnEvent">{{mode == 1?'筛选往日列表':'从手机相册选择'}}</div> -->
        <div class="close_bnt" @click="closelist">取消</div>
    </div>
</div>   
</template>
<script>
export default {
    props:{
        // mode:{
        //     type:Number,
        //     default:0
        // },
        childlish:{
            type:Array,
            default:[]
        }
    },
    data(){
        return {

        }
    },
    methods:{
        closelist(){
            this.$emit('closemodal')
        },
        btnEvent(index){
            this.$emit('skiptopublish',index)
        }

    }
}
</script>
<style  scoped>
.mo_bg{
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 0.3;
     position: fixed;
  bottom: 0;
  left: 0;
}
 .list_box{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
   border-top-right-radius: 10px;
    border-top-left-radius: 10px;
 }

 .list{
      width: 100%;
 height: 50px;
     line-height: 50px;
     text-align: center;
 }
 .close_bnt{
     width: 100%;
     border-top: 8px solid rgba(0,0,0,0.3);
     height: 50px;
     line-height: 50px;
     text-align: center;
 }
 .color_red{
     color: red;
 }
</style>